// 基于react-router-dom封装、使用前请确保安装了 react/react-router-dom包

import { HashRouter, Redirect, Route, Switch } from "react-router-dom";
import { Suspense, lazy } from "react";

//路由懒加载
let Home = lazy(() => import("../component/home/home.jsx"));
let User = lazy(() => import("../component/user/user.jsx"));
let List = lazy(() => import("../component/list/list.jsx"));

// 路由属性说明：
// path: 路由路径(必传) 
// exact: 是否对路由进行精准匹配 不需要可不设置该属性
// redirect:重定向(值为你需要重定向的路径、不需要可不传)
// children:子路由
// component:要显示的组件

// 使用方法
// 在RouterList中设置你的路由信息
// 在app.js 中导入Routes 并使用
// 在对应的页面父级页面导入 viewRouter并使用 例： viewRouter(this.props.children)
let RouterList = [
    {
        path: "/",
        redirect: "/home",
        exact: true
    },
    {
        path: "/home",
        component: Home,
        children: [
            {
                path:"/home",
                exact:true,
                redirect:"/home/list"
            },
            {
                path: "/home/user",
                component: User,
            },
            {
                path: "/home/list",
                component: List,
            }
        ]
    }
]

export function viewRouter(list) {
    return (
        <HashRouter>
            <Suspense fallback={() => (<div>loading...</div>)}>
                <Switch>
                    {
                        list.map((item) => {
                            if (item.redirect) {
                                return (
                                    <Route
                                        key={item.path}
                                        exact={item.exact}
                                        path={item.path}
                                        render={() => (<Redirect to={item.redirect}></Redirect>)}
                                    >
                                    </Route>
                                )
                            } else {
                                return (
                                    <Route
                                        key={item.path}
                                        exact={item.exact}
                                        path={item.path}
                                        render={props => (<item.component {...props} children={item.children}></item.component>)}
                                    >
                                    </Route>
                                )
                            }
                        })
                    }
                </Switch>
            </Suspense>
        </HashRouter>
    )
}

export let Routes = () => (
    viewRouter(RouterList)
)






